<template>
  <div class="portrait">

    <!-- 客户画像 -->

    <div class="custome_portrait">
      <h2>客户画像</h2>
      <div
        class="pie_chart"
        v-for="(item,i) in portraitLength"
        :key=i
      >
        <p>
          <i></i>
          <span>{{attribute[i]}}</span>
        </p>
        <div
          :id="item"
          class="portrait_type"
          style="width:320px;height:230px;"
        ></div>
      </div>
    </div>

    <div class="cust_portrait">
      <!-- <h2>特征</h2> -->
      <div class="traffic">
        <p>
          <i></i>
          <span>特征</span>
        </p>
        <div
          id="charaId"
          :style="{width: '400px', height: '260px'}"
        ></div>
        <div class="portrait_list">
          <span
            v-for="(item,i) in characteristics"
            :key="i"
            :style="'color:'+colorList[i]+''"
          >{{item}}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import moment from "moment";

export default {
  name: "customerPortrait",
  components: {},

  data() {
    return {
      dataList: [],
      maxValue: 0,
      characteristics: [], //特征
      colorList: [],
      portraitLength: ["charId", "sexId"],
      attribute: ["年龄", "性别"]
    };
  },
  mounted() {
    this.getPortrait(); //画像
    this.getMaxFlowShop(); //特征
  },

  methods: {
    //获取画像

    getPortrait() {
      let datas = [
        [
          { value: 348, name: "18-30" },
          { value: 251, name: "30-50" },
          { value: 147, name: "未知" }
        ],
        [
          { value: 348, name: "女性" },
          { value: 330, name: "男性" },
          { value: 147, name: "未知" }
        ]
      ];
      let colors = [
        ["#cbfcb2", "#888aba", "#db9e36", "#36db9b"],
        ["#ec6371", "#a6dffb", "#888aba"]
      ];
      this.portraitLength.forEach((item, i) => {
        let myChart = this.$echarts.init(document.getElementById(item));

        let option = {
          tooltip: {
            show: true //显示提示框
          },
          color: colors[i],
          legend: {
            orient: "vertical",
            x: "250px",
            y: "bottom",
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              fontSize: 12,
              color: "#F1F1F3"
            }
          },
          series: [
            {
              name: "车辆占比",
              type: "pie",
              center: ["40%", "50%"],
              radius: ["60%", "80%"],
              label: {
                normal: {
                  position: "inner",
                  show: false
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: "30",
                    fontWeight: "bold"
                  }
                }
              },
              data: datas[i]
            }
          ]
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      });
    },

    // 获取特征

    getMaxFlowShop() {
      let myChart = this.$echarts.init(document.getElementById("charaId"));
      var colors = [
        "#9fa2ec",
        "#a6dffb",
        "#ec6371",
        "#cbfcb2",
        "#9fa2ec",
        "#a6dffb",
        "#ec6371",
        "#cbfcb2",
        "#9fa2ec",
        "#a6dffb",
        "#ec6371",
        "#cbfcb2"
      ];
      // var coo=["#ccc","#ccc","#f60","#f60","#ccc","#ccc","#ccc"];
      var aCategorys = [
        "",
        "特征A",
        "",
        "",
        "特征B",
        "",
        "",
        "特征C",
        "",
        "",
        "特征D",
        ""
      ];
      var aSeries = [];
      var offs = [false, false, false, false, true, false, false, true, false];
      this.colorList = colors;
      aCategorys.forEach((v, i, a) => {
        //console.log("i", i);
        var name = v;
        if (v != "") {
          this.characteristics.push(v);
          var data = [];
          var z = 2;
          if (i % 2 == 1) {
            z = 3;
          }
          for (var j = 0; j < aCategorys.length; j++) {
            data.push("-");
          }
          data[i - 1] = 0;
          data[i] = Math.round(Math.random() * 30 + 5);
          data[i + 1] = 0;

          console.log("data[i]", colors[i - 1]);

          var cc = {
            name: name,
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 1,

            lineStyle: {
              normal: {
                color: "#f60",
                width: 0
              }
            },
            itemStyle: {
              normal: {
                label: {
                  // formatter: "{c}" + "%",
                  formatter: function(params) {
                    console.log("params", params);
                    if (params.data != 0) {
                      return params.data + "%";
                    } else {
                      return "";
                    }
                  },
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "" + colors[i - 1] + ""
                  }
                }
              }
            },
            areaStyle: {
              normal: {
                opacity: 1,
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[i - 1] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[i - 1] // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: data,
            z: z
          };
          aSeries.push(cc);
        }
      });

      var option = null;
      option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            var rValue;
            params.forEach(function(v, i, a) {
              if (v.data != 0 && v.data != "-") {
                rValue = v.seriesName + ": " + v.data;
              }
            });
            return rValue;
          }
        },
        xAxis: [
          {
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#7643be" //更改坐标轴颜色
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#f60", //更改坐标轴文字颜色
                fontSize: 14
              }
            },
            type: "category",
            boundaryGap: true,
            data: aCategorys,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#7643be" //更改坐标轴颜色
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 14
              }
            },
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        series: aSeries
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.portrait {
  width: 400px;
  height: 100vh;
  float: left;
  .custome_portrait {
    width: 100%;
    height: 70vh;
    .pie_chart {
      width: 350px;
      height: 250px;
      margin-left: 30px;
      margin-bottom: 40px;
      p {
        text-align: left;
        color: #fff;
        i {
          width: 6px;
          height: 16px;
          background: linear-gradient(
            0deg,
            rgba(87, 61, 160, 1) 0%,
            rgba(169, 136, 202, 1) 100%
          );
          display: inline-block;
          vertical-align: middle;
          border-radius: 3px;
        }
      }
    }
  }
  .cust_portrait {
    width: 400px;
    height: 280px;
    margin-top: 20px;
    float: left;
    h2 {
      margin: 20px auto 0;
    }
    .traffic {
      p {
        text-align: left;
        color: #fff;
        margin: 0;
        margin-left: 30px;
        i {
          width: 6px;
          height: 16px;
          background: linear-gradient(
            0deg,
            rgba(87, 61, 160, 1) 0%,
            rgba(169, 136, 202, 1) 100%
          );
          display: inline-block;
          vertical-align: middle;
          border-radius: 3px;
        }
      }
      width: 400px;
      height: 220px;
      position: relative;
      .portrait_list {
        position: absolute;
        left: 44px;
        bottom: -34px;
        width: 320px;
        height: 24px;
        display: flex;
        span {
          text-align: center;
          margin: 0 auto;
          width: 33.3%;
          overflow: hidden;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
<style>
.custome_portrait h2 ,.map_region h2,.hot_list h2{
  font-size: 20px;
  color: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  display: inline-block;
  background: url("../../assets/images/tit_bg.png") top repeat-x,
    url("../../assets/images/tit_bg.png") bottom repeat-x,
    url("../../assets/images/tit_line.png") right top no-repeat,
    url("../../assets/images/tit_line.png") right bottom no-repeat,
    url("../../assets/images/tit_line.png") left top no-repeat,
    url("../../assets/images/tit_line.png") left bottom no-repeat;
}
</style>
